<template>
  <div>
    <!-- <el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="Dialog Title"> -->
    <main style="margin: 30px 30px" v-if="studentId != null || flag">
      <el-row>
        <el-col :span="24">
          <h1 style="text-align: center">学生基本信息</h1>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
          label-position="top"
        >
          <el-col :span="12">
            <el-form-item label="学生姓名" prop="studentName">
              <el-input
                v-model="formData.studentName"
                placeholder="请输入姓名"
                clearable
                prefix-icon="el-icon-user"
                :style="{ width: '100%' }"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学生民族" prop="nation">
              <el-input
                v-model="formData.nation"
                placeholder="请输入民族"
                clearable
                prefix-icon="el-icon-user"
                :style="{ width: '100%' }"
                :disabled="disabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学院" prop="college">
              <el-select
                v-model="formData.college"
                placeholder="请选择学院"
                clearable
                :style="{ width: '100%' }"
                :disabled="disabled"
              >
                <el-option
                  v-for="(item, index) in collegeOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业" prop="speciality">
              <el-select
                v-model="formData.speciality"
                placeholder="请选择专业"
                clearable
                :style="{ width: '100%' }"
                :disabled="disabled"
              >
                <el-option
                  v-for="(item, index) in specialityOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级" prop="classId">
              <el-select
                v-model="formData.classId"
                placeholder="请选择班级"
                clearable
                :style="{ width: '100%' }"
                :disabled="disabled"
              >
                <el-option
                  v-for="(item, index) in classIdOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年级" prop="grade">
              <el-select
                v-model="formData.grade"
                placeholder="请选择年级"
                clearable
                :style="{ width: '100%' }"
                :disabled="disabled"
              >
                <el-option
                  v-for="(item, index) in gradeOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker
                v-model="formData.birthday"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择出生日期"
                clearable
                :disabled="disabled"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="政治面貌" prop="outlook">
              <el-radio-group
                v-model="formData.outlook"
                size="medium"
                :disabled="disabled"
              >
                <el-radio
                  v-for="(item, index) in outlookOptions"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="家庭住址" prop="address">
              <el-cascader
                v-model="formData.address"
                :options="addressOptions"
                :props="{ checkStrictly: true }"
                :style="{ width: '100%' }"
                placeholder="请选择家庭住址"
                clearable
                :disabled="disabled"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="街道" prop="addressDetail">
              <el-input
                v-model="formData.addressDetail"
                clearable
                :disabled="disabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="家庭情况" prop="family_situation">
              <el-input
                v-model="formData.family_situation"
                type="textarea"
                placeholder="请输入家庭情况"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
                :disabled="disabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label-width="130px"
              label="描述自己的家庭"
              prop="describe_family"
            >
              <el-input
                v-model="formData.describe_family"
                type="textarea"
                placeholder="描述自己的家庭"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
                :disabled="disabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label-width="140px"
              label="描述自己生活成长的环境和学习的经历"
              prop="describe_experience"
            >
              <el-input
                v-model="formData.describe_experience"
                type="textarea"
                placeholder="描述自己生活成长的环境和学习的经历"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
                :disabled="disabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="说说自己的特长" prop="specialty">
              <el-input
                v-model="formData.specialty"
                type="textarea"
                placeholder="说说自己的特长"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
                :disabled="disabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="说说自己的个人习惯" prop="personal_habits">
              <el-input
                v-model="formData.personal_habits"
                type="textarea"
                placeholder="说说自己的个人习惯"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
                :disabled="disabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="说说自己的兴趣" prop="interests">
              <el-input
                v-model="formData.interests"
                type="textarea"
                placeholder="说说自己的兴趣"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
                :disabled="disabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="说说自己的个性特点" prop="personality">
              <el-input
                v-model="formData.personality"
                type="textarea"
                placeholder="说说自己的个性特点"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
                :disabled="disabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="说说自己的座右铭" prop="motto">
              <el-input
                v-model="formData.motto"
                type="textarea"
                placeholder="说说自己的座右铭"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
                :disabled="disabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="自己的工作（做事）经历" prop="work_experience">
              <el-input
                v-model="formData.work_experience"
                type="textarea"
                placeholder="自己的工作（做事）经历"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
                :disabled="disabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="对自己未来的期望" prop="future">
              <el-input
                v-model="formData.future"
                type="textarea"
                placeholder="请输入对自己未来的期望"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
                :disabled="disabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              prop="optForm"
              style="display: flex; justify-content: end"
            >
              <el-button-group v-if="formData.studentName != undefined">
                <el-button
                  type="primary"
                  size="medium"
                  @click="() => (disabled = !disabled)"
                >
                  编辑/取消编辑
                </el-button>
                <el-button type="primary" size="medium" @click="handleConfirm">
                  提交
                </el-button>
              </el-button-group>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </main>
    <main v-else>
      <el-empty
        description="不好意思,这是学生编辑页面,由于您不是学生,所以不对您展示"
      ></el-empty>
    </main>
  </div>
</template>
<script>
import {
  getMe,
  fetchStudentInfo,
  getAddress,
} from "@/api/personal/personal.js";
import { Message } from "element-ui";
import { mapGetters } from "vuex";
import { meBySID } from "@/api/student/student.js";
import { pcaTextArr } from "element-china-area-data";

export default {
  inheritAttrs: false,
  components: {},
  props: [],
  data() {
    return {
      disabled: true,
      addressOptions: [],
      flag: false,
      formData: {
        studentName: undefined,
        college: undefined,
        speciality: undefined,
        classId: undefined,
        grade: undefined,
        birthday: null,
        outlook: "",
        nation: "",
        address: [1, 2],
        addressDetail: undefined,
        family_situation: undefined,
        describe_family: undefined,
        describe_experience: undefined,
        specialty: undefined,
        personal_habits: "",
        interests: undefined,
        personality: undefined,
        motto: undefined,
        work_experience: undefined,
        future: undefined,
        submitForm: "",
      },
      rules: {
        studentName: [
          {
            required: true,
            message: "请输入姓名学生姓名",
            trigger: "blur",
          },
        ],
        college: [
          {
            required: true,
            message: "请选择学院",
            trigger: "change",
          },
        ],
        speciality: [
          {
            required: true,
            message: "请选择您的专业",
            trigger: "change",
          },
        ],
        classId: [
          {
            required: true,
            message: "请选择班级",
            trigger: "change",
          },
        ],
        grade: [
          {
            required: true,
            message: "请选择年级",
            trigger: "change",
          },
        ],
        birthday: [
          {
            required: true,
            message: "请选择出生日期出生日期",
            trigger: "change",
          },
        ],
        outlook: [
          {
            required: true,
            message: "政治面貌不能为空",
            trigger: "change",
          },
        ],
        address: [
          {
            required: true,
            type: "array",
            message: "请至少选择一个address",
            trigger: "change",
          },
        ],
        family_situation: [
          {
            required: true,
            message: "请输入家庭情况",
            trigger: "blur",
          },
        ],
        describe_family: [
          {
            required: true,
            message: "描述自己的家庭",
            trigger: "blur",
          },
        ],
        describe_experience: [
          {
            required: true,
            message: "描述自己生活成长的环境和学习的经历",
            trigger: "blur",
          },
        ],
        specialty: [
          {
            required: true,
            message: "说说自己的特长",
            trigger: "blur",
          },
        ],
        personal_habits: [
          {
            required: true,
            message: "说说自己的个人习惯",
            trigger: "blur",
          },
        ],
        interests: [
          {
            required: true,
            message: "说说自己的兴趣",
            trigger: "blur",
          },
        ],
        personality: [
          {
            required: true,
            message: "说说自己的个性特点",
            trigger: "blur",
          },
        ],
        motto: [
          {
            required: true,
            message: "说说自己的座右铭",
            trigger: "blur",
          },
        ],
        work_experience: [
          {
            required: true,
            message: "自己的工作（做事）经历",
            trigger: "blur",
          },
        ],
        future: [
          {
            required: true,
            message: "请输入对自己未来的期望",
            trigger: "blur",
          },
        ],
      },
      collegeOptions: [
        {
          label: "软件学院",
          value: "软件学院",
        },
        {
          label: "信息工程学院",
          value: "信息工程学院",
        },
      ],
      specialityOptions: [
        {
          label: "软件工程",
          value: "软件工程",
        },
        {
          label: "动画",
          value: "动画",
        },
        {
          label: "人工智能",
          value: "人工智能",
        },
      ],
      classIdOptions: [
        {
          label: "1班",
          value: 1,
        },
        {
          label: "2班",
          value: 2,
        },
        {
          label: "3班",
          value: 3,
        },
      ],
      gradeOptions: [
        {
          label: "2021",
          value: 2021,
        },
        {
          label: "2022",
          value: 2022,
        },
        {
          label: "2023",
          value: 2023,
        },
        {
          label: "2024",
          value: 2024,
        },
      ],
      outlookOptions: [
        {
          label: "共青团员",
          value: "共青团员",
        },
        {
          label: "群众",
          value: "群众",
        },
        {
          label: "共产党员",
          value: "共产党员",
        },
      ],
      addressOptions: pcaTextArr,
      addressProps: {
        multiple: false,
      },
    };
  },
  computed: {
    ...mapGetters(["id", "studentId"]),
  },
  watch: {
    "formData.address": {
      handler(newData) {
        console.log(newData);
      },
    },
  },
  created() {},
  async mounted() {
    let data = null;
    console.log(this.$route);
    if (this.$route.query.studentId) {
      const { data: dataB } = await meBySID(
        Number(this.$route.query.studentId)
      );
      this.flag = true;
      data = dataB;
    } else {
      const { data: dataA } = await getMe(this.id);
      data = dataA;
    }
    if (data != null) {
      this.formData.studentName = data.studentName;
      this.formData.birthday = data.studentBithday;
      this.formData.outlook = data.studentOutlook;
      this.formData.speciality = data.studentSpecialized;
      this.formData.college = data.studentFaculties;
      this.formData.nation = data.studentNation;
      this.formData.classId = Number(data.studentClass);
      this.formData.grade = data.studentGrade;
      this.formData.addressDetail = data.studentStreet;
      this.formData.address = [
        data.studentProvince,
        data.studentCity,
        data.studentDistrict,
      ];
      this.formData.family_situation = data.familySituation;
      this.formData.describe_experience = data.describeExperience;
      this.formData.describe_family = data.describeFamily;
      this.formData.personal_habits = data.personalHabits;
      this.formData.interests = data.interests;
      this.formData.specialty = data.specialty;
      this.formData.personality = data.personality;
      this.formData.motto = data.motto;
      this.formData.work_experience = data.workExperience;
      this.formData.future = data.future;
    }
    // const { data: address } = await getAddress();
    // console.log(address);
    // this.addressOptions = address;
  },
  methods: {
    onOpen() {},
    onClose() {
      this.$refs["elForm"].resetFields();
    },
    close() {
      this.$emit("update:visible", false);
    },
    handleConfirm() {
      this.$refs["elForm"].validate(async (valid) => {
        if (!valid || this.disabled) {
          Message({ message: "提交失败", type: "error", duration: 5 * 1000 });
          return;
        }
        const { data } = await fetchStudentInfo({
          studentId: this.studentId,
          studentName: this.formData.studentName,
          studentClass: this.formData.classId,
          studentBithday: this.formData.birthday,
          studentProvince: this.formData.address[0] || "",
          studentCity: this.formData.address[1] || "",
          studentOutlook: this.formData.outlook,
          studentSpecialized: this.formData.speciality,
          studentGrade: this.formData.grade,
          studentNation: this.formData.nation,
          studentFaculties: this.formData.college,
          studentStreet: this.formData.addressDetail,
          familySituation: this.formData.family_situation,
          describeFamily: this.formData.describe_family,
          describeExperience: this.formData.describe_experience,
          personalHabits: this.formData.personal_habits,
          personality: this.formData.personality,
          studentNation: this.formData.nation,
          interests: this.formData.interests,
          motto: this.formData.motto,
          workExperience: this.formData.work_experience,
          specialty: this.formData.specialty,
          future: this.formData.future,
          studentDistrict: this.formData.address[2] || "",
          uid: this.id,
        });
        if (data != 0) {
          Message({ message: "提交成功", type: "success", duration: 5 * 1000 });
        }
        // this.close();
      });
    },
    reset() {
      this.$refs["elForm"].resetFields();
    },
    getAddressOptions() {
      this.handleConfirm();
      // TODO 发起请求获取数据
      this.addressOptions;
    },
  },
};
</script>
<style></style>
